<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <!-- form里的enctype只有三种，因为是浏览器自动生成数据请求的，不像ajax中可以使用application/json等 -->
    <!-- form里没有声明method默认使用get，使用get后浏览器会帮我们把数据自动格式化成query的形式放在url的后面。 -->
    <!-- http://localhost:8888/form?name=aaa&password=123 -->
  <!-- <form action="/form" enctype="application/x-www-form-urlencoded" method="POST">  -->
  <form action="/form" id="form" enctype="multipart/form-data" method="POST"> 
    <!-- multipart/form-data代表我们这个请求是有多个部分的，因为我们通过表单上传文件的时候必须要把文件那部分单独拆出来，文件是不能作为字符串来进行传输的，而要作为二进制数据来传输。 -->
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="submit">
  </form>
  <script>
    form.addEventListener('submit',(e)=>{
      e.preventDefault()
      var formData = new FormData(form)
      fetch('/form',{//不用去主动地声明content-type，fetch会自动根据传入的body信息去做对应的操作。
        method:'post',
        body:formData
      })
    })
    
  </script>
</body>
</html>